<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 90%;
            margin: 0 auto;
        }

        #app>table {
            width: 24%;
            float: left;
            border-collapse: collapse;
            margin-left: 10px;
            height: 240px;
            border: 1px solid #369;
        }

        #app>table th {
            background-color: #ccc;
        }

        #app>table td,
        #app>table th {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app"></div>
</body>

</html>
<script>
    var year = parseInt(prompt("请输入一个四位数"))
    // var app=Document.gerElementByID("app")
    var app = document.querySelector('#app')
    var w = new Date(year, 0, 2).getDay()
    if(w==0){
        w=7
    }
    var html = ""
    for (var i = 0; i < 12; i++) {
        html = "<table>"
        html += `<tr><th colspan="7">${year}年${i + 1}月</th></tr>`
        html += `<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>`
        html += "<tr>"
        var maxDay = new Date(year, i + 1, 0).getDate()
        // console.log(maxDay);
        for (var d = 1; d <= maxDay; d++) {
            if (d == 1 && w != 1) {
                html += `<td colspan="${w-1}"></td>`
            }
            html += `<td>${d}</td>`
            if (w == 7 && d != maxDay) {
                html += "<tr></tr>"
            } else if (d == maxDay) {
                html += "</tr>"
            }
            w = w == 7 ? 1 : ++w
        }
        html += "</table>"
        app.innerHTML += html
    }
</script>